<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="product-box com-box">
			<view class="carousel">
				<swiper indicator-dots circular=true duration="400">
					<swiper-item class="swiper-item" v-for="(item, index) in goods.goodsPicList" :key="item.id">
						<view class="image-wrapper">
							<image :src="item" mode="aspectFill" lazy-load></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="introduce-section">
				<text class="title clamp2">{{goods.goodsName}}</text>
				<view class="price-box">
					<text class="price">{{goods.price}}</text>
					<text class="size">{{goods.specification}}</text>
					<text class="time">截止时间：{{$util.sliceTime(goods.endDate)}}</text>
				</view>
				<!-- #ifdef H5 -->
				<view class="attr-content pc">
					<view class="attr-list">
						<view class="item-list">
							<view class="ttl">规格</view>
							<view class="tit-box">
								<text class="tit selected">{{goods.specification}}</text>
							</view>
						</view>
						<view class="item-list">
							<view class="ttl">库存</view>
							<view class="stock">{{goods.count}}件</view>
						</view>
					</view>

				</view>
				<!-- #endif -->
			</view>

			<view class="detail-desc detail-desc-500">
				<view class="d-header">
					<text class="d-ttl">商品介绍</text>
					<text class="d-txt">今日交易量：{{goods.salesNum}}次</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-home"></text>
						<text>产地</text>
					</view>
					<text>{{goods.origin}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-chandi"></text>
						<text>存放地</text>
					</view>
					<text>{{goods.storage}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-guige"></text>
						<text>规格</text>
					</view>
					<text>{{goods.specification}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-date"></text>
						<text>出厂日期</text>
					</view>
					<text>{{$util.sliceTime(goods.factoryDate)}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-biaozhun"></text>
						<text>技术标准</text>
					</view>
					<text>{{goods.technicalStandard}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-zhijian"></text>
						<text>质量等级</text>
					</view>
					<text>{{goods.qualityLevel}}</text>
				</view>
				<view class="d-info">
					<view class="d-ttl">
						<text class="icon icon-baozhuang"></text>
						<text>包装方式</text>
					</view>
					<text>{{goods.packing}}</text>
				</view>
			</view>

			<view class="detail-desc detail-desc-600">
				<view class="d-header">
					<text class="d-ttl">商品详情</text>
				</view>
				<view class="d-info">{{goods.description}}</view>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniHeader,
			uniFooter
		},
		data() {
			return {
				goods: {},
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '正在加载'
			})
			this.$api.request('/zrGoods/getGoodsInfo', {
				id: option.id,
			}, {
				content: 'application/x-www-form-urlencoded',
				failback: failres => {
					this.$api.msg(failres.message)
					uni.hideLoading()
				}
			}).then(res => {
				this.goods = res.data
				uni.hideLoading()
			})
		},
		methods: {}
	}
</script>

<style lang='scss'>
	/* 轮播图 */
	.carousel {
		height: 510upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 510upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx $base-row-spacing;
		border-bottom: 20upx solid $base-color-bg;

		.title {
			display: block;
			font-size: $base-font-base;
			color: $base-color-dark;
			line-height: 40upx;
		}

		.price-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10upx 0;
			font-size: $base-font-lg;
			color: $base-color-warning;
		}

		.price {
			font-size: $base-font-lg + 4upx;
		}

		.size {
			display: inline-block;
			vertical-align: top;
			margin-left: 40upx;
			padding: 0 20upx;
			font-size: $base-font-base;
			color: $base-color-light;
			line-height: 45upx;
			border-radius: 20upx;
			background-color: #f0f0f0;
		}

		.time {
			margin-left: 40upx;
			font-size: $base-font-sm;
			color: $base-color-light;

		}
	}

	.rich-img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		line-height: 0px;
	}

	button::after {
		border: none;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.product-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20px;
		}

		/* 轮播图 */
		.carousel {
			width: 500px;
			height: 500px;
			position: relative;

			.swiper-item {
				height: 500px;
			}

		}

		/* 标题简介 */
		.introduce-section {
			margin-bottom: 20px;
			padding: 20px 30px;
			width: 680px;
			min-height: 500px;
			border-bottom: 0;
			background: #fff;

			.title {
				font-size: 24px;
				line-height: 40px;
			}

			.price-box {
				justify-content: flex-start;
				padding: 10px 0 0;
				font-size: 16px;
			}

			.price {
				font-size: 28px;
				line-height: 30px;
			}

			.size {
				margin-left: 30px;
				padding: 0 20px;
				font-size: 16px;
				line-height: 30px;
				border-radius: 20px;
			}

			.time {
				margin-left: 30px;
				font-size: 16px;
			}
		}

		.detail-desc-500 {
			width: 320px;
		}

		.detail-desc-600 {
			width: 860px;
		}
	}

	/* #endif */
</style>
